<template>
  <div class="tag-packet">
    <el-card :class="{ 'download-table': isDownload }">
      <tag-content-header add search refresh setting @toolFun="toolFun" :settingData="columns">
        <template #title>
          <span>标签包</span>
        </template>
        <template #toolsPre>
          <el-tooltip effect="dark" content="批量导出标签包数据" placement="top" slot="reference">
            <el-button type="primary" plain circle @click="toggleDownload">
              <icon-svg name="iconExport"></icon-svg>
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="批量添加标签" placement="top">
            <el-button type="primary" plain circle @click="bathImport">
              <icon-svg name="iconImport"></icon-svg>
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="下载批量添加标签模板" placement="top">
            <el-button type="primary" plain circle @click="downloadTemplate">
              <icon-svg name="iconDownload"></icon-svg>
            </el-button>
          </el-tooltip>
        </template>
      </tag-content-header>
      <tag-table
        ref="table"
        @refresh="getList"
        :data="dataList"
        :loading="loading"
        :columns="columns"
        :params="params"
        :total="totalSize"
        :selection="isDownload"
        rowKey="packetId"
      >
        <template #creatorNm="{ scope }">
          {{ $name(scope.row, 'creatorNnm', 'creatorNm') }}
        </template>
        <template #operation="{ scope }">
          <div class="operation-button-box">
            <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
              <icon-svg name="iconEdit" class="svg-edit" @click.native="handleEdit(scope.row)"></icon-svg>
            </el-tooltip>
            <el-tooltip effect="dark" content="添加标签" placement="top" :enterable="false">
              <icon-svg name="iconMount" class="svg-mount" @click.native="handleMount(scope.row)"></icon-svg>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
              <icon-svg name="iconDelete" class="svg-delete" @click.native="handleDelete(scope.row)"></icon-svg>
            </el-tooltip>
          </div>
        </template>
      </tag-table>
      <el-button type="primary" size="medium" class="download-btn" v-if="isDownload" @click="downloadResult">
        确定导出
      </el-button>
    </el-card>
    <packet-drawer ref="packetDrawer" @refresh="getList"></packet-drawer>
    <packet-import-drawer ref="packetImportDrawer"></packet-import-drawer>
  </div>
</template>

<script>
import packetDrawer from './packet-edit-drawer'
import packetImportDrawer from './packet-import-drawer'
export default {
  components: {
    packetDrawer,
    packetImportDrawer
  },
  data() {
    return {
      loading: false,
      dataList: [],
      isDownload: false,
      columns: [
        {
          show: true,
          label: '标签包名称',
          prop: 'packetNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '描述',
          prop: 'packetDesc',
          align: 'center'
        },
        {
          show: true,
          label: '创建用户名',
          prop: 'creatorNm',
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 200
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  watch: {
    isDownload(val) {
      if (!val) {
        this.downloadNodeId = 1
        this.$refs.table.clearSelect()
      }
    }
  },
  // created() {
  //   this.getList()
  // },
  methods: {
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagPacket/pageList'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'add':
          if (this.isDownload) return
          this.$refs.packetDrawer.showDrawer({ type: 'add' })
          break
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          if (this.isDownload) this.$refs.table.clearSelect()
          this.getList()
          break
      }
    },
    downloadResult() {
      let selectedRow = this.$refs.table.getSelectList()
      if (!selectedRow.length) {
        this.$message.error('请选择需要导出的标签包！')
        return
      }
      let packetList = []
      selectedRow.forEach(item => {
        packetList.push(item.packetId)
      })
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagPacketDetail/downloadPacketDetail'),
        method: 'post',
        data: this.$ajax.setData({
          packetList
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$dlFile(data.data)
          this.$message.success(data.msg)
          this.$refs.table.clearSelect()
          this.isDownload = false
        } else {
          this.$message.error(data.msg)
        }
        this.loading = false
      })
    },
    toggleDownload() {
      this.isDownload = !this.isDownload
    },
    handleDelete(row) {
      this.$confirm('确认删除【' + row.packetNm + '】？')
        .then(() => {
          let messageBox = document.getElementsByClassName('el-message-box__wrapper')
          messageBox[0].focus() // 防止按空格键重复确定
          this.$ajax({
            url: this.$ajax.setUrl(`ast/astTagPacket/${row.packetId}`),
            method: 'delete',
            params: this.$ajax.setParams()
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.getList()
              this.$message.success('操作成功')
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        })
        .catch(() => {})
    },
    handleEdit(row) {
      this.$refs.packetDrawer.showDrawer({ type: 'edit', packet: row })
    },
    downloadTemplate() {
      this.$ajax({
        url: this.$ajax.setUrl('stg/stgStdFile/import/tmpl'),
        method: 'get',
        params: this.$ajax.setParams({
          tmplId: 11
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$dlFile(data.data.fileId)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    bathImport() {
      this.$refs.packetImportDrawer.showDrawer()
    },
    handleMount(row) {
      this.$blank('packet-mount', {
        newpage: true,
        params: { packetId: row.packetId }
      })
    }
  }
}
</script>

<style lang="scss">
.tag-packet {
  position: relative;
  .download-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
  .download-table {
    .el-pagination {
      margin-right: 100px;
    }
  }
  .operation-button-box {
    .svg-mount {
      color: #f6bf1b;
    }
  }
}
</style>
